{% extends './layout/base.njk' %}
{% block stylesheet %}
  <link rel="stylesheet" href="/public/bootstrap-table/bootstrap-table.min.css"/>
  <link rel="stylesheet" href="/public/bootstrap-table/bootstrap-table-custom.css"/>
  <link rel="stylesheet/less" href="/public/style/home.less"/>
{% endblock stylesheet %}
{% block header %}
  {% include './components/Header.njk' %}
{% endblock header %}
{% block main %}
  <div class="row">
    <div class="col-md-6">
      <label for="swagger-url" class="form-label">swagger api url</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span for="validationPassword" class="input-group-text">
            http://
          </span>
        </div>
        <input
        type="url" class="form-control" id="swagger-url" placeholder="请输入 swagger api doc url"/>
      <!-- <button type="submit" id="get_swagger-doc" class="btn btn-primary btn-outline-secondary
      color-white">获取文档</button> -->
      </div>
    </div>
    <div class="col-md-6"></div>
    <div class="col-md-6 pt-2">
      <button class="btn btn-success" data-toggle="modal" data-target="#generator_postman-doc--model">
        <i class="fas fa-download pe-2"></i>一键生成Postman文档</button>
      <button type="submit" id="save_swagger-doc" class="btn btn-primary color-white">
        <i class="fas fa-save pe-2"></i>保存文档</button>
    </div>
    <div
      class="col-md-6">
      {# <button class="btn btn-primary" id="generatorDoc">生成文档</button> #}
      <ul class="list-group" id="doc-list"></ul>
    </div>
  </div>
  <div
    class="col-md-12 mt-2" id="postman-doc">
    {# <ul class="list-group" id="swagger-api-list"></ul> #}
    <div class="accordion h-30" id="swagger-api-list"></div>
    <div class="accordion" id="accordionExample"></div>
  </div>
  {# 右侧抽屉 #}
  <div class="offcanvas-mask invisible zy-row-100 zy-col-100" id="offcanvasRight">
    <div class="offcanvas zy-row-60">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas right</h5>
        <button type="button" class="close close--offcanvas" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="offcanvas-body table-striped">
        <div id="zy-table-toolbar">
          <button class="btn btn-primary">
            <i class="fas fa-plus pe-2"></i>新增
          </button>
        </div>
        <table id="bootstrap-table"></table>
      </div>
    </div>
  </div>
  {# 一键生成 Postman 功能-提示框 #}
  <div class="modal fade" id="generator_postman-doc--model" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">温馨提示</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>一键生成 Postman 文档功能将会直接下载转换好的文档!</p>
          <p>该文档将会导出 swagger 中所有的 API 接口文档.</p>
          <p>您无法对文档进行在线修改操作！</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button id="generator_postman-doc" class="btn btn-primary">生成文档</button>
        </div>
      </div>
    </div>
  </div>
{% endblock main %}
{% block script %}
  <script src="/public/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="/public/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
  <script src="/public/bootstrap-table/bootstrap-table-custom.js"></script>
  <script src="/public/js/home.js"></script>
{% endblock script %}